@import "../../../assets/sass/variables";
.free-ribbon  {
  position: absolute;
  overflow: hidden;
  width: 85px;
  height: 88px;
  top: -3px;
  right: -3px;
  &.free-ribbon-left {
    left: -3px;
    right: auto;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .free-ribbon-wrapper {
    position: relative;
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    padding: 7px 0;
    left: -5px;
    top: 15px;
    width: 120px;
    line-height: 20px;
    background-color: #555;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);

    &:before,
    &:after {
      position: absolute;
      content: " ";
      line-height: 0;
      border-top: 2px solid #555;
      border-left: 2px solid transparent;
      border-right: 2px solid transparent;
      bottom: -2px;
    }

    &:before {
      left: 0;
      bottom: -1px;
    }

    &:after {
      right: 0;
    }

    &:before,
    &:after {
        border-top: 2px solid #555;
    }
  }

  &.free-ribbon-type-2 {
    width: auto;
    height: 30px;
    clear: left;
    position: absolute;
    top: 12px;
    right: -2px;
    overflow: visible;
    color: #ffffff;
    &.free-ribbon-left {
      left: -2px;
      right: auto;
      .free-ribbon-wrapper {
        &:before {
          left: 100%;
          right: auto;
          border: 15px solid #555;
          border-right: 10px solid transparent;
        }
      }
    }
    .free-ribbon-wrapper {
      transform: none;
      top: 0;
      left: 0;
      width: auto;
      height: 100%;
      line-height: 30px;
      padding: 0 20px;
      &:after {
        border-color: transparent;
      }
      &:before {
        position: absolute;
        top: 0;
        right: 100%;
        left: auto;
        display: block;
        width: 0;
        height: 0;
        content: '';
        border: 15px solid #555;
        border-left: 10px solid transparent;
      }
    }
  }

  @each $theme, $color in $theme {
    &.free-ribbon-#{$theme}  {
      .free-ribbon-wrapper {
        background-color: $color;

        &:before,
        &:after {
          border-top: 2px solid $color;
        }
      }

      &.free-ribbon-type-2 {
        .free-ribbon-wrapper {
          &:before {
            border: 15px solid $color;
            border-left: 10px solid transparent;
          }
        }

        &.free-ribbon-type-2.free-ribbon-left {
          .free-ribbon-wrapper {
            &:before {
              border: 15px solid $color;
              border-right: 10px solid transparent;
            }
          }
        }
      }
    }
  }
}


